<template>
  <el-dialog
    title="成绩详情"
    :visible="open"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="1200px"
    append-to-body
    @close="cancel()"
  >
    <div v-loading="loading" class="all_content">
      <div class="student_sign">
        <div class="student_name">
          {{ gradesDetial.studentName }}（{{ gradesDetial.studentNum }}）
        </div>
        <div class="student_info">
          <div class="info_item">
            班级：{{ gradesDetial.className }}({{ gradesDetial.branchName }}--{{
              gradesDetial.majorName
            }})
          </div>
          <div class="info_item">课程：{{ gradesDetial.courseName }}</div>
          <div class="info_item">班级平均成绩：{{ gradesDetial.avgScore }}</div>
        </div>
      </div>
      <div class="scroll_box">
        <div class="daily_score">
          <div class="title">总评</div>
          <div>
            <el-table :data="distributionList" border style="width: 100%">
              <el-table-column
                align="center"
                prop="dailyScoreTotal"
                :label="`课堂表现分(${gradesDetial.usualScorePercentage}%)`"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="processExamScoreTotal"
                :label="`过程性考核(${gradesDetial.processScorePercentage}%)`"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="finishExamScoreTotal"
                :label="`终结性考核(${gradesDetial.examScorePercentage}%)`"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="scoreTotal"
                label="总分"
              ></el-table-column>
            </el-table>
          </div>
        </div>
        <div class="daily_score_detail">
          <div class="title">明细</div>
          <div class="flex_center">
            <div class="text">课堂表现分</div>
            <div class="table_box">
              <el-table :data="dailyScoreList" border style="width: 100%">
                <el-table-column
                  align="center"
                  prop="score"
                  label="打分"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="teacherName"
                  label="打分教师"
                ></el-table-column>
                <el-table-column align="center" label="打分时间">
                  <template slot-scope="scope">
                    <div>
                      {{ parseTime(scope.row.operateTime) }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="remark"
                  label="打分备注"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    {{ scope.row.remark ? scope.row.remark : '--' }}
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="flex_center">
            <div class="text">过程性考核</div>
            <div class="table_box">
              <el-table :data="processExamScore" border style="width: 100%">
                <el-table-column
                  align="center"
                  prop="ancestorsName"
                  label="任务名称"
                >
                  <template slot-scope="scope">
                    <el-tooltip
                      effect="dark"
                      :content="scope.row.ancestorsName"
                      placement="top"
                      :open-delay="300"
                    >
                      <span style="cursor: pointer">{{
                          filterTxt(scope.row.ancestorsName)
                        }}</span>
                    </el-tooltip>
                  </template>
                </el-table-column
                >
                <el-table-column
                  align="center"
                  prop="indexName"
                  label="考核内容"
                ></el-table-column>
                <el-table-column align="center" label="占比(%)">
                  <template slot-scope="scope">
                    <div>{{ scope.row.scorePercentage }}%</div>
                  </template>
                </el-table-column>
                <el-table-column align="center">
                  <template #header>
                    <div
                      style="
                        display: flex;
                        align-items: center;
                        justify-content: center;
                      "
                    >
                      得分
                      <el-tooltip class="item" effect="dark" placement="top">
                        <i
                          class="el-icon-question shou"
                          style="
                            font-size: 16px;
                            vertical-align: middle;
                            margin-left: 5px;
                          "
                        ></i>
                        <div slot="content">
                          <div>"99"：该步骤考核的成绩</div>
                          <div>"--"：学生暂未参与该步骤考核</div>
                        </div>
                      </el-tooltip>
                    </div>
                  </template>
                  <template slot-scope="scope">
                    <div>
                      {{ scope.row.score ? scope.row.score : '--' }}
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="flex_center">
            <div class="text">终结性考核</div>
            <div class="table_box">
              <el-table :data="finishExamScore" border style="width: 100%">
                <el-table-column
                  align="center"
                  prop="ancestorsName"
                  label="任务名称"
                >
                  <template slot-scope="scope">
                    <el-tooltip
                      effect="dark"
                      :content="scope.row.ancestorsName"
                      placement="top"
                      :open-delay="300"
                    >
                      <span style="cursor: pointer">{{
                          filterTxt(scope.row.ancestorsName)
                        }}</span>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="name"
                  label="考核内容"
                ></el-table-column>
                <el-table-column align="center" label="占比(%)">
                  <template slot-scope="scope">
                    <div>{{ scope.row.scorePercentage }}%</div>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="得分">
                  <template #header>
                    <div
                      style="
                        display: flex;
                        align-items: center;
                        justify-content: center;
                      "
                    >
                      得分
                      <el-tooltip class="item" effect="dark" placement="top">
                        <i
                          class="el-icon-question shou"
                          style="
                            font-size: 16px;
                            vertical-align: middle;
                            margin-left: 5px;
                          "
                        ></i>
                        <div slot="content">
                          <div>"99"：该步骤考核的成绩</div>
                          <div>"--"：学生暂未参与该步骤考核</div>
                        </div>
                      </el-tooltip>
                    </div>
                  </template>
                  <template slot-scope="scope">
                    <div>
                      {{ scope.row.score ? scope.row.score : '--' }}
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        v-preventReClick
        @click="getLastOne"
        v-if="showLast"
      >上一份
      </el-button
      >
      <el-button
        type="primary"
        v-preventReClick
        @click="getNextOne"
        v-if="showNext"
      >下一份
      </el-button
      >
      <el-button v-preventReClick @click="cancel">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { gradesInfo } from '@/api/schoolOrganization/student'

export default {
  props: {
    open: {
      type: Boolean,
      default: false
    },
    index: {
      type: [String, Number]
    },
    list: {
      type: Array
    },
    courseStuId: {
      type: [String, Number]
    }
  },
  watch: {
    open(val) {
      if (val) {
        this.gradesInfo()
      }
    },
    index(val) {
      if (val == 0) {
        this.showLast = false
      } else {
        this.showNext = true
      }
      this.showNext = val != this.list.length - 1;
    }
  },
  created() {
  },
  data() {
    return {
      loading: false,
      distributionList: [
        {
          processExamScoreTotal: 0,
          finishExamScoreTotal: 0,
          dailyScoreTotal: 0,
          scoreTotal: 0
        }
      ],
      showLast: false,
      showNext: false,
      gradesDetial: {},
      processExamScore: [],
      finishExamScore: [],
      dailyScoreList: []
    }
  },
  methods: {
    getLastOne() {
      this.index--
      this.courseStuId = this.list[this.index].courseStuId
      this.gradesInfo()
    },
    getNextOne() {
      this.index++
      this.courseStuId = this.list[this.index].courseStuId
      this.gradesInfo()
    },
    cancel() {
      this.$emit('update:open', false)
    },
    async gradesInfo() {
      this.loading = true
      let params = {
        courseStuId: this.courseStuId
      }
      let res = await gradesInfo(params)
      const { code, data } = res
      if (code == 200) {
        this.loading = false
        this.gradesDetial = data
        //过程型考核
        this.processExamScore = data.progressScoreList
        //终结性考核
        this.finishExamScore = data.examScoreList
        this.dailyScoreList = data.usualScoreList
        this.distributionList[0].processExamScoreTotal =
          data.processScore.toFixed(1)
        this.distributionList[0].finishExamScoreTotal =
          data.examScore.toFixed(1)
        this.distributionList[0].dailyScoreTotal = data.usualScore.toFixed(1)
        this.distributionList[0].scoreTotal = data.totalScore.toFixed(1)
      } else {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped lang="scss">
.all_content {
  width: 100%;
  padding: 30px;
  box-sizing: border-box;

  .student_sign {
    width: 100%;

    .student_name {
      width: 100%;
      color: #333333;
      font-weight: bold;
      font-size: 16px;
    }

    .student_info {
      display: flex;
      align-items: center;
      margin: 20px 0;

      .info_item {
        margin-right: 20px;
        color: #999999;
        font-size: 14px;
      }
    }
  }

  .scroll_box {
    width: 100%;

    .daily_score {
      width: 100%;
      display: flex;
      flex-direction: column;
      margin-bottom: 10px;

      .title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
      }
    }

    .daily_score_detail {
      width: 100%;
      display: flex;
      flex-direction: column;
      margin-bottom: 10px;
      height: calc(100vh - 540px);
      overflow: auto;

      .title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
      }

      .flex_center {
        display: flex;
        align-items: center;

        .text {
          width: 120px;
          height: 100%;
          background: #e5edee;
          display: flex;
          justify-content: center;
          align-items: center;
          border: 1px solid #dfe6ec;
          border-right: 0;
          border-bottom: 0;
        }

        .table_box {
          flex: 1;

          .total_center {
            width: 100%;
            display: flex;
            justify-content: center;
            height: 43px;
            align-items: center;
            border: 1px solid #e6ebf5;
            border-top: 0;
            color: #606266;
            font-size: 14px;
          }

          .total_center:hover {
            background: #f5f7fa;
          }
        }
      }
    }
  }
}
</style>
